<template>
  <div>
    <el-row type="flex">
      <InnerSidebar v-model="sidebarCollapsed">
        <template #header>
          <span class="inline-block text-sm">{{ $t('menu.M_10400006') }}</span>
          <div>
            <el-popover
              v-model="addGroupVisible"
              placement="bottom"
              width="300"
              @show="viewAddGroupVisible"
            >
              <div style="text-align: right; margin: 0">
                <el-form :model="dataForm">
                  <el-input
                    v-model="dataForm.addGroupName"
                    :placeholder="$t('group.addGroup')"
                    style="padding: 8px"
                    maxlength="64"
                    show-word-limit
                    clearable
                    @blur="() => (dataForm.addGroupName = dataForm.addGroupName.trim())"
                  />
                </el-form>
                <div align="center" style="margin: 10px 0 10px 0">
                  <span>
                    <el-button size="small" type="danger" @click="addGroupVisible = false">{{
                      $t('common.cancel')
                    }}</el-button>
                    <el-button
                      type="primary"
                      size="small"
                      :loading="addGroupLoading"
                      @click="addGroupHandle()"
                      >{{ $t('common.confirm') }}</el-button
                    >
                  </span>
                </div>
              </div>
              <template #reference>
                <el-button class="w-8" v-if="isAuth('10400006.MANAGE')" type="primary">
                  <svg-icon icon-class="plus" :style="{ fontSize: '24px' }" /> </el-button
              ></template>
            </el-popover>
          </div>
        </template>
        <template #default>
          <ul class="text-sm list">
            <li
              class="item"
              v-for="item in groupList"
              :key="item.categoryId"
              :class="{ active: rightPartGroupId == item.groupId }"
              @click="getGroupDetails(item.groupId, item.groupName)"
            >
              <div>
                <span
                  style="
                    width: 250px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                  "
                  >{{ item.groupName }}</span
                >
              </div>
            </li>
          </ul>
        </template>
      </InnerSidebar>
      <!--    布局右边-->
      <el-col v-show="this.visible" :span="18" style="margin-left: 25%">
        <div class="banner">
          <div class="backdrop p-6">
            <div class="flex items-center justify-between">
              <div>
                <span class="text-white text-sm">{{
                  $t('menu.M_10400006')
                }}</span>
                <h1 class="text-xl text-white font-bold">
                  {{ rightPartGroupName }}
                </h1>
              </div>
              <!-- TODO: 加到组件库当中 -->
              <el-button
                text
                class="dark"
                style="width: 40px; height: 40px"
                :loading="delGroupLoading"
                @click="delGroupHandle()"
              >
                <svg-icon
                  icon-class="Delete"
                  :style="{ fontSize: '24px', color: 'white' }"
                />
              </el-button>
            </div>
          </div>
        </div>

        <!--      图片-->

        <div class="mx-4">
          <el-tabs>
            <el-tab-pane :label="$t('group.application')">
              <application :group-id="this.rightPartGroupId" />
            </el-tab-pane>
            <el-tab-pane :label="$t('group.operatorList')">
              <OperatorList :group-id="this.rightPartGroupId" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { sysGroupSelect, addGroup, deleteGroup } from '@/api/group'
import Application from './components/application.vue'
import OperatorList from './components/operator-list.vue'
import { isAuth } from '@/utils'
import InnerSidebar from '@/components/InnerSidebar/index.vue'

export default {
  components: {
    Application,
    OperatorList,
    InnerSidebar
  },
  data() {
    return {
      dataForm: {
        groupName: '',
        remark: '',
        addGroupName: ''
      },
      visible: false,
      rightPartGroupName: '',
      rightPartGroupId: '',
      addGroupVisible: false,
      groupList: [],
      appList: [],
      loading: false,
      addGroupLoading: false,
      delGroupLoading: false,
      noMore: false,
      busy: false,
      pageNo: 1,
      pageSize: 18,
      rows: 0,
      groupId: null,
      clickAppId: 0
    }
  },
  computed: {
    colHeight() {
      return this.$store.state.common.documentClientHeight - 85 - 80
    }
  },
  mounted() {
    this.dataForm.groupName = ''
    this.getGroupList()
  },
  methods: {
    getGroupList() {
      sysGroupSelect({
        groupName: this.dataForm.groupName
      })
        .then((data) => {
          if (data[0]) {
            this.visible = true
            this.groupList = data
            this.rightPartGroupName = data[0].groupName
            this.rightPartGroupId = data[0].groupId
          } else {
            this.visible = false
            this.groupList = []
            this.rightPartGroupName = ''
            this.rightPartGroupId = ''
          }
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    viewAddGroupVisible() {
      this.dataForm.addGroupName = ''
      this.dataForm.remark = ''
    },
    addGroupHandle() {
      this.addGroupLoading = true
      if (this.dataForm.addGroupName === '') {
        this.addGroupLoading = false
        return this.$message.warning('group can not be empty')
      }
      addGroup({
        groupName: this.dataForm.addGroupName,
        remark: this.dataForm.remark
      })
        .then((data) => {
          console.log(data)
          this.addGroupLoading = false
          this.getGroupList()
        })
        .catch((e) => {
          this.$confirmError(e)
          this.addGroupLoading = false
        })
      this.dataForm.addGroupName = ''
      this.dataForm.remark = ''
      this.addGroupVisible = false
    },
    getGroupDetails(groupId, groupName) {
      this.rightPartGroupName = groupName
      this.rightPartGroupId = groupId
    },
    delGroupHandle() {
      console.log(this.rightPartGroupName)
      this.$confirm(
        this.$t('group.tip_delete_group', { pkgName: this.rightPartGroupName }),
        '',
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }
      ).then(() => {
        this.delGroupLoading = true
        deleteGroup(this.rightPartGroupId)
          .then((data) => {
            this.delGroupLoading = false
            this.getGroupList()
          })
          .catch((e) => {
            this.$confirmError(e)
            this.delGroupLoading = false
          })
      })
    },
    isAuth
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  width: calc(25% - 62.5px);
  height: calc(100vh - 56px);
  transition: transform var(--el-transition-duration-fast);
}

:deep(.el-card__header) {
  padding: 9.5px 16px;
}
.backdrop {
  backdrop-filter: blur(4px);
  background-color: var(--board-header-background-color);
}
.banner {
  background-image: url('/src/assets/images/group-banner.png');
  background-size: cover;
  background-position: center;
  color: #e2e6ed;
}
</style>
